import React, {Component, useRef, useState} from 'react'
import logo from '@/assets/xiaomi_logo.png'
import './index.css'
import {Avatar, message, Spin} from "antd";
import {useNavigate} from "react-router-dom";
import {HTTP} from "@/utils/HTTP.js";

const Register = () => {
    const navigate = useNavigate();
    const [spinning, setSpinning] = useState(false);
    const [percent, setPercent] = useState(0);
    const usernameRef = useRef()
    const passwordRef = useRef()
    const passwordTwoRef = useRef()
    const identifyRef = useRef()
    // 点击注册按钮
    const register = async () => {
        let obj = {
            username: usernameRef.current.value,
            password: passwordRef.current.value,
            passwordTwo: passwordTwoRef.current.value,
            identify: identifyRef.current.value,
        }
        if (obj.username === '' || obj.password === '' || obj.passwordTwo === '' || obj.identify === '') {
            message.error("请输入完整信息")
        } else if (obj.password !== obj.passwordTwo) {
            message.error("两次密码不一致")
        } else {

            const res = await HTTP({
                method: "POST",
                url: "/adminLogin/add",
                data: {
                    adminname: obj.username,
                    password: obj.password,
                    identify: obj.identify,
                    imgPath: "/defaultAvater/default.jpg"
                }
            })
            if (res.code === 104) {
                setSpinning(true);
                let ptg = -10;
                const interval1 = setInterval(() => {
                    ptg += 5;
                    setPercent(ptg);
                    if (ptg > 100) {
                        clearInterval(interval1);
                        setSpinning(false);
                        setPercent(0);
                        window.history.go(-1)
                        message.success("注册成功")
                    }
                }, 100);
            } else {
                message.error("注册失败")
            }

        }
    }
// 点击返回按钮
    const showLoader2 = () => {
        setSpinning(true);
        let ptg = -10;
        const interval2 = setInterval(() => {
            ptg += 5;
            setPercent(ptg);
            if (ptg > 100) {
                clearInterval(interval2);
                setSpinning(false);
                setPercent(0);
                navigate("/login");
                message.success("跳转成功");
            }
        }, 100);
    };
    return (
        <div className="main">
            <Spin spinning={spinning} percent={percent} fullscreen/>
            <h1 className={"title"}>
                <i>
                    小米商城后台管理系统
                </i>
            </h1>
            <h1 className={"welcome"}>
                <i>
                    Welcome 欢迎来到
                </i>
            </h1>
            <h1 className={"forget"}>
                <i onClick={showLoader2}>
                    返回登录
                </i>
            </h1>
            <div className="login-box">
                <div className="owl" id="owl">
                    <Avatar size={70} src={logo}></Avatar>
                </div>
                <div className="input-box">
                    <input type="text" ref={usernameRef} placeholder="账号"/>
                    <input type="password" ref={passwordRef} placeholder="密码" id="password1"/>
                    <input type="password" ref={passwordTwoRef} placeholder="确认密码" id="password2"/>
                    <input type="text" ref={identifyRef} placeholder="验证码" id="identify"/>
                    <button onClick={() => register()}>注册</button>
                </div>
            </div>
        </div>
    )
}
export default Register

